<template>
  <!-- 点餐-评价 -->
  <div class="evaluate">
    <shop-head></shop-head>
    <van-tabs v-model="activeName">
    <van-tab title="商品">商品</van-tab>
    <van-tab title="评价">
      <div class="evaluate-wrap">
        <div class="evaluate-number">
          <div class="number1">4.2</div>
          <div class="number2">综合评价</div>
          <div class="number3">高于周边商家76.9</div>
        </div>
        <div class="evaluate-start">
          <div>服务态度<span>4.7</span></div>
          <div>菜品评价<span>4.7</span></div>
          <div>送达时间<span>分钟</span></div>
        </div>
      </div>

      <div class="tag">
        <van-tag type="primary" size="large">全部内容（473）</van-tag>
        <van-tag type="primary" size="large" color="#ebf5ff" text-color="#6d7885">标签标签</van-tag>
        <van-tag type="primary" size="large"  color="#f5f5f5" text-color="#aaaaaa">标签标签标签</van-tag>
        <van-tag type="primary" size="large"  color="#ebf5ff" text-color="#6d7885">标签</van-tag>
        <van-tag type="primary" size="large"  color="#ebf5ff" text-color="#6d7885">标签</van-tag>
        <van-tag type="primary" size="large"  color="#ebf5ff" text-color="#6d7885">标签</van-tag>
        <van-tag type="primary" size="large"  color="#ebf5ff" text-color="#6d7885">标签</van-tag>
        <van-tag type="primary" size="large"  color="#ebf5ff" text-color="#6d7885">标签</van-tag>
        <van-tag type="primary" size="large"  color="#ebf5ff" text-color="#6d7885">标签</van-tag>
      </div>

      <div class="comment-wrap">
        <div class="comment-head-img">
          <van-image
            round
            width="40"
            height="40"
            src="https://img01.yzcdn.cn/vant/cat.jpeg"
          />
        </div>
        <div class="comment-content">
          <div class="comment-top">
            <div>4********6</div>
            <div>2017-02-10</div>
          </div>
          <div class="comment-bottom">
            <div class="comment-text">按时送达</div>
            <div class="comment-img">
              <van-image
                width="72"
                height="72"
                src="https://img01.yzcdn.cn/vant/cat.jpeg"
              />
              <van-image
                width="72"
                height="72"
                src="https://img01.yzcdn.cn/vant/cat.jpeg"
              />
            </div>
            <div class="comment-tag">
              <van-tag type="primary" size="large"  color="#f5f5f5" text-color="#aaaaaa">标签标签标签</van-tag>
              <van-tag type="primary" size="large"  color="#f5f5f5" text-color="#aaaaaa">标签标签标签</van-tag>
            </div>
            </div>
        </div>
      </div>

    </van-tab>
  </van-tabs>
  </div>
</template>

<script>
import { Tab, Tabs,Tag,Image as VanImage } from 'vant';
import ShopHead from './ShopHead';
export default {
  name: "Evaluate",
  components: { 
    ShopHead,
    [Tab.name]:Tab,
    [Tabs.name]:Tabs,
    [Tag.name]:Tag,
    [VanImage.name]:VanImage,
   },
  data() {
    return {
      active: 2,
    };
  },
};
</script>

<style lang="less">
.evaluate {
  width: 100%;
  .evaluate-wrap{
    height: 112px;
    border: 1px solid #f5f5f5;
    border-bottom: 12px solid #f5f5f5;
    display: flex;
    justify-content: center;
    align-items: center;
    box-sizing: content-box;
    .evaluate-number{
      width:115px;
      height: 70px;
      text-align: center;
      margin: auto 32px;
      .number1{
        font-size: 22px;
        color:#ff6600;
      }
      .number2{
        margin: 6px auto;
        font-size: 16px;
        color:#666666;
      }
      .number3{
        font-size: 12px;
        color:#999999;
      }
    }
    .evaluate-start{
      width:154px;
      height: 70px;
      div{
        font-size: 14px;
        margin-bottom: 5px;
        color:#666666;
        span{
          margin-right: 2px;
          color:#999999;
        }
      }
    }
  }
  .tag{
      width:95% ;
      display: flex;
      flex-wrap: wrap;
      justify-content: flex-start;
      margin: 20px auto;
      .van-tag{
        margin: 2px;
        height: 35px;
      }
    }
  .comment-wrap{
    border-top: 1px solid #f5f5f5;
    width: 355px;
    display: flex;
    padding-top: 17px;
    margin: 17px 10px;
    .comment-head-img{
      width:40px;
      height: 40px;
      margin-right:20px ;
    }
    .comment-top{
      width: 100%;
      display: flex;
      justify-content: space-between;
      font-size: 14px;
      color: #999999;
    }
    .comment-bottom{
      width: 100%;
      margin: 10px auto;
    }
    .comment-text{
      color: #666666;
      font-size: 14px;
    } 
    .comment-img{
      width: 172px;
      height: 72px;
      display: flex;
      margin: 10px;
    }
    .comment-tag{
      .van-tag{
        width:40px;
        height: 35px;
        margin-right:10px ;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
      }
    }
  }
}
</style>